<!DOCTYPE html>
<html>
  <head >
    <meta charset="UTF-8">
    <title>CSS 小餐 - 我们在这里准备好了css选择器大餐!</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/levels.js" type="text/javascript" charset="utf-8"></script>
    <script
      src="js/restaurant.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <script src="js/jquery.mCustomScrollbar.min.js"></script>
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="./css/font.css" />
    <link
      rel="stylesheet"
      href="css/jquery.mCustomScrollbar.css"
      type="text/css"
      media="screen"
      title="no title"
      charset="utf-8"
    />
    <link
      rel="stylesheet"
      href="css/style.css"
      type="text/css"
      media="screen"
      title="no title"
      charset="utf-8"
    />

    <meta property="og:url" content="http://cssdiner.com" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="CSS 小餐" />
    <meta
      property="og:description"
      content="一个帮助你练习css选择器的游戏网站"
    />
    <meta
      property="og:image"
      content="https://flukeout.github.io/images/fb-share.jpg"
    />
  </head>

  <body>
    <div class="left-col">
      <header>
        CSS 小餐
        <div class="logo">
          <plate><apple /></plate>
        </div>
        <span class="share-menu">
          分享
          <a class="share-twitter" type="twitter" href="#"></a>
          <a class="share-facebook" type="facebook" href="#"></a>
          <a class="share-email" type="email" href="#"></a>
        </span>
      </header>
      <h2 class="order"></h2>
      <div class="note">
        <h3>别担心，你能行的！</h3>
        <p>
          You're about to learn CSS Selectors! Selectors are how you pick which
          element to apply styles to.
        </p>
        <h4>Exhibit 1 - A CSS Rule</h4>
        <pre>
p {
   margin-bottom: 12px;
}</pre
        >

        <p>
          Here, the "p" is the selector (selects all &lt;p&gt; elements) and
          applies the margin-bottom style.
        </p>
        <p>
          To play, type in a CSS selector in the editor below to select the
          correct items on the table.If you get it right, you'll advance to the
          next level.
        </p>
        <p>Hover over the items on the table to see their HTML markup.</p>
        <p>Get help with selectors on the right! &rarr;</p>
        <a class="note-toggle" href="#">Ok, got it!</a>
      </div>

      <a class="note-toggle" href="#">救命，我卡住了!</a>

      <div class="game-wrapper">
        <div class="table-wrapper">
          <div class="table-surface"></div>
          <div class="nametags"></div>
          <div class="table"></div>
        </div>
        <div class="table-edge">
          <div class="table-leg"></div>
          <div class="table-leg"></div>
        </div>
      </div>

      <div class="editor">
        <div class="editor-pane">
          <div class="input-header">
            <div class="file-name">style.css</div>
            CSS Editor
          </div>
          <div class="file-window css-view">
            <div class="line-numbers">
              1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
            </div>
            <input
              class="input-strobe"
              type="text"
              placeholder="这里写选择器"
            /><span class="plus">+</span>
            <div class="enter-button">enter</div>
            <div>
              {<br />
              /* 样式写在这里 */<br />
              }
            </div>
            <div class="help">
              <br />
              /* <br />
              输入数字进行跳过关卡.<br />
              如 &rarr; "5" for 第5关 <br />*/
            </div>
          </div>
        </div>

        <div class="editor-pane html-view">
          <div class="input-header">
            <div class="file-name">table.html</div>
            HTML Viewer
          </div>
          <div class="file-window">
            <div class="line-numbers">
              1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20
            </div>
            <div class="markup"></div>
          </div>
        </div>
      </div>

      <div class="what-is-this">
        <p>
          Made by
          <a href="http://www.twitter.com/flukeout">@flukeout</a> &mdash; come
          say hi!
        </p>
        <p>
          Have feedback or questions? Please file an issue on
          <a href="https://github.com/flukeout/css-diner/issues"
            >the Github repo</a
          >.
        </p>
      </div>

      <div class="helper">
        <!-- This is the popup that floats over table elements -->
      </div>
    </div>
    <!-- /left-col -->

    <div class="right-col">
      <div class="help-wrapper">
        <h1 class="level-header">
          <span class="level-text"></span>
          <span class="checkmark"></span>
        </h1>

        <div class="level-nav">
          <a class="previous" href="#"></a>
          <a class="next" href="#"></a>
        </div>

        <div class="level-progress"><div class="progress"></div></div>

        <div class="display-help">
          <h3 class="selector-name"></h3>
          <h2 class="title"></h2>
          <h3 class="syntax"></h3>
          <div class="hint"></div>
          <h4 class="examples-title">示例</h4>
          <div class="examples"></div>
        </div>
      </div>

      <div class="level-menu">
        <h2>Choose a level</h2>
        <div class="levels"><!-- level links are inserted here--></div>
        <a class="reset-progress" href="#">Reset Progress</a>
      </div>

      <div class="level-menu-toggle-wrapper">
        <div class="level-menu-toggle"></div>
      </div>
    </div>
    <!-- /right-col -->
  </body>
</html>
